<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风险预警管理系统</title>
    <script src="js/header.js"></script>
    <style>
        html, body, #App {
            padding: 0px;
            margin: 0px;
            height: 100%;
            font-size: 14px;
            font-family: "微软雅黑";
        }

        .el-header {
            background-image: url("images/header.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 100px !important;
            position: relative;
        }

        /*.el-header .el-row{
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 10px 0;
        }*/
        .el-header .el-row {
            float: right;
            padding: 5px 30px;
            margin-right: 30px;
            margin-top: 25px;
            text-align: center;
            color: #fff;
        }

        .login_name {
            padding: 5px;
            background: rgba(255, 255, 255, .2);
            border-radius: 30px;
            font-size: 16px;
        }

        .tuichu > button.el-button.is-round {
            padding: 6px 15px;
            font-size: 16px;
            font-family: "黑体";
        }

        /*左侧菜单字体*/
        .el-menu span {
            font-family: "微软雅黑";
            font-size: 16px;
        }

        .el-main {
            margin: 0;
            padding: 0;
            overflow: auto;
        }

        .el-main > div {
            background-color: #fff;
            width: 100%;
            height: 100%;
            /*min-width: 1200px;*/
            color: white;
            text-align: center;
            padding: 0px;
        }

        .height100percent {
            height: 100%;
            overflow: hidden;
        }

        .main-menu {
            height: 100%;
            font-weight: 300;
        }

        .main-menu:not(.el-menu--collapse) {
            min-width: 260px;
            max-width: 390px;
        }

        .el-main {
            overflow: hidden;
            /*overflow: visible;*/
        }

        .main-tabs {
            height: 100%;
            border: 0px;
            overflow: auto;
        }

        .el-menu-item {
            padding-left: 0;
            font-weight: normal;
        }

        .el-submenu__title {
            font-weight: normal;
        }

        .headMenu {
            border-radius: 10px;
            font-size: 10px;
            margin-top: 1px;
            padding: 5px;
        }

        /*.el-tabs__content, .el-tab-pane{
            padding: 0!important;
            margin: 0!important;
            height: 100%;
        }*/
        .el-tabs__content {
            width: 100%;
            height: 95%;
            box-sizing: border-box;
            /*overflow: auto!important;*/
        }

        .el-tabs__content > div {
            height: 100%;
            background: #FFFFFF;
            border: 1px solid #C0CCDA;
            box-shadow: 0 2px 4px 0 rgba(208, 208, 208, 0.50);
            border-radius: 4px;
        }

        .el-tabs__content::-webkit-scrollbar, .main-tabs::-webkit-scrollbar {
            width: 0 !important;
        }

        /*.xf{
            z-index: 9999;
            position: fixed;
            right: 0px;
            top: 0px;
        }*/
        .xfcon {
            position: fixed;
            width: 100px;
            right: 0px;
            top: 200px;
            text-align: center;
        }

        .xfcon img {
            margin: 0 auto;
            cursor: pointer;
            display: block;
            margin-bottom: 5px;
        }

        .search {
            text-align: center;
        }

        .legalName:hover {
            color: #409EFF;
            cursor: pointer;
        }

        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .el-tabs__nav-next, .el-tabs__nav-prev {
            position: absolute;
            cursor: pointer;
            line-height: 40px;
            font-size: 12px;
            color: #909399;
        }

        #App .el-menu-item i {
            color: #000;
        }

        #index {
            background: url(./images/bg.png) no-repeat;
            background-size: cover;
        }

        #tabsIframe {
            background: url(./images/bg.png) no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<div v-cloak id="App">
    <div id="modal" v-show="shade"
         style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: transparent;z-index: 9;"></div>
    <el-container class="height100percent">
        <el-header class="el-header">
            <el-row>
                <el-col class="login_name" :span="20">
                    <span>欢迎您！{{ userName }}</span>
                </el-col>
                <el-col class="tuichu" :span="3" :offset="1">
                    <el-button round @click="logoutSystem">退出</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-container class="height100percent">
            <el-menu :default-active="activeIndex" @open="handleOpen" @close="handleClose" :unique-opened="true"
                     background-color="#e7f0ff"
                     text-color="black" text-color-weight="500" active-text-color="#008cff" :collapse="isCollapse"
                     :collapse-transition="true" class="main-menu">
                <div class="el-submenu__title"
                     style="padding-left: 20px;height: 39px;color: black;border-bottom: 1px solid #E4E7ED;background-color: #f5f7fa;"
                     @click="isCollapse = !isCollapse;">
                    <i v-if="isCollapse == false" class="el-submenu__icon-arrow el-icon-arrow-left"></i>
                    <i v-else class="el-submenu__icon-arrow el-icon-arrow-right" style="right: 27px;"></i>
                </div>
                <el-menu-item index="firstPage" @click="selectTabName='firstPage'">
                    <template slot="title">
                        <i class="fa fa-fw fa-asterisk"></i>
                        <span slot="title">首页</span>
                    </template>
                </el-menu-item>
                <!-- 菜单栏展示 -->
                <template v-for="item in menulist">
                    <el-submenu v-if="item.subMenu && item.subMenu.length" :index="item.menuId" :key="item.menuId">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{item.menuName}}</span>
                        </template>
                        <template v-for="itemChild in item.subMenu">
                            <el-submenu v-if="itemChild.subMenu && itemChild.subMenu.length" :index="itemChild.menuId"
                                        :key="itemChild.menuId">
                                <template slot="title">
                                    <i :class="itemChild.icon"></i>
                                    <span>{{itemChild.menuName}}</span>
                                </template>
                                <el-menu-item v-for="itemChild_Child in itemChild.subMenu"
                                              :index="itemChild_Child.menuId" :key="itemChild_Child.menuId"
                                              @click="addTab(itemChild_Child)">
                                    <i :class="itemChild_Child.icon"></i>
                                    <span slot="title">{{itemChild_Child.menuName}}</span>
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="itemChild.menuId" :key="itemChild.menuId"
                                          @click="addTab(itemChild)">
                                <i :class="itemChild.icon"></i>
                                <span slot="title">{{itemChild.menuName}}</span>
                            </el-menu-item>
                        </template>
                    </el-submenu>
                    <el-menu-item v-else :index="item.menuId" :key="item.menuId" @click="addTab(item)">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.menuName}}</span>
                    </el-menu-item>
                </template>
            </el-menu>
            <el-main>
                <el-tabs type="border-card" class="main-tabs" v-model="selectTabName" @tab-remove="mainTabsRemoveTab">
                    <el-tab-pane :name="firstPageName">
                        <span slot="label"><i class="el-icon-date"></i>首页</span>
                        <iframe v-if="showfirstpage" frameborder="0" width="100%" id="index" src="html/sy.html"
                                onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
                    </el-tab-pane>
                    <el-tab-pane closable v-for="(item, index) in mainTabs" :key="item.id" :name="item.name"
                                 :label="item.title" @click="menuVisible = false">
                        <span slot="label" @contextmenu.prevent="tabsClick(item.title,item.content,$event)"><i
                                class="el-icon-s-tools"></i>{{item.title}}</span>
                        <iframe frameborder="0" :src="item.content" :ref="item.content" id="tabsIframe" width="100%"
                                v-loading.body.lock="bodyscreenLoading"
                                onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
            <el-row v-show="menuVisible" style="position: absolute;" :style="{ top: topSize+'px',left: leftSize+'px' }">
                <el-col>
                    <ul class="el-dropdown-menu el-popper" id="dropdown-menu-2334" v-show="menuVisible"
                        style="position: relative;">
                        <li tabindex="-1" class="el-dropdown-menu__item" v-for="item in dropDown"
                            @click="closeTab(item.name)">{{ item.name }}
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </el-container>
    </el-container>
</div>
<script>
    var vue = new Vue({
        el: '#App',
        created: function () {
            this.getUser();
            /*  var userInfo = JSON.parse(localStorage.getItem('userInfo'));
              this.userName = userInfo.loginName;*/
            /*var USER_AGENT = navigator.userAgent.toLowerCase();
            var isChrome = /.*(chrome)\/([\w.]+).*!/;
            alert(!isChrome.test(USER_AGENT));*/
        },
        mounted: function () {
            this.getMenu();
            this.checkUrl();
            document.getElementById("modal").addEventListener("click", this.closeMenu);
        },
        updated: function () {

        },
        beforeDestroy: function () {
            // 移除监听
            document.getElementById("modal").removeEventListener("click", this.closeMenu);
        },
        data: function () {
            return {
                userName: '',
                collapseBtnClick: false,
                isCollapse: false, // 菜单折叠和展开
                activeIndex: 'firstPage', // 左侧菜单被选项
                selectTabName: 'firstPage',
                firstPageName: 'firstPage',
                supReconsider: false, //智能辅助复议对话框弹窗
                searchForm: '',
                shade: false,
                mainTabs: [],
                posts: [
                    {id: 1, title: 'My journey with Vue'},
                    {id: 2, title: 'Blogging with Vue'},
                    {id: 3, title: 'Why Vue is so fun', content: '111'}
                ],
                menulist: [],
                showfirstpage: false,
                menuVisible: false,
                topSize: 0,
                leftSize: 0,
                selectTitle: '', // 选中的menu标题
                dropDown: [
                    {name: '刷新标签页'},
                    {name: '关闭标签页'},
                    {name: '关闭其他标签页'},
                    {name: '关闭全部标签页'},
                    {name: '关闭右侧标签页'},
                    {name: '关闭左侧标签页'}
                ],
                bodyscreenLoading: false,
                messageList: [
                    /*{
                        menuId: '',
                        menuName: '风险预警分发',
                        menuUrl: '',
                        index: '',
                        show: false
                    },*/
                    {
                        menuId: '',
                        menuName: '风险预警认领',
                        menuUrl: '',
                        index: '',
                        show: false
                    }
                ]
            }
        },
        methods: {
            checkUrl() {
                var $this = this;
                // 获取参数
                let url = window.location.search;
                var requestId;
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        requestId = unescape(strs[i].split("=")[1]);
                        localStorage.setItem('changeUrl', requestId); // 参数
                    }
                }
                var getUrl_setTimeout = setTimeout(function () {
                    var get_url = localStorage.getItem('changeUrl');
                    if (get_url != '') {
                        // 地址去除参数
                        localStorage.setItem('params', get_url);
                        localStorage.setItem('changeUrl', '');
                        location.href = 'index.html';
                    } else {
                        $this.showFastBtn();
                        clearInterval(getUrl_setTimeout);
                    }
                }, 1000)
            },
            showFastBtn() {
                var menulist = JSON.parse(localStorage.getItem("menuList"));
                var type = JSON.parse(localStorage.getItem("params"));
                if (type == 1) {
                    var messageList = this.messageList;
                    // 遍历--匹配
                    for (var i = 0; i < messageList.length; i++) {
                        var ftxt = messageList[i].menuName;
                        for (var j = 0; j < menulist.length; j++) {
                            if (ftxt == menulist[j].menuName) {
                                messageList[i].show = true;
                                messageList[i].menuId = menulist[j].menuId; // 添加id
                                messageList[i].menuUrl = menulist[j].menuUrl; // 添加url
                                this.addTab(messageList[i]);
                                break;
                            }
                        }
                    }
                }
            },
            getMenu: function () {
                axios.get(appBaseUrl + "/menu/getMenu").then(response => {
                    let da = JSON.parse(response.data.data);
                    this.menulist = da;
                    localStorage.setItem("menuList", JSON.stringify(response.data.fastBtn));
                    this.showfirstpage = true;
                })
            },

            // 添加标签
            addTab:function(menu) {
                // console.log(menu);
                var exist = false;
                for (var i = 0; i < this.mainTabs.length; i++) {
                    if (menu.menuId == this.mainTabs[i].id) {
                        exist = true;
                        break;
                    }
                }
                if(!exist){
                    this.mainTabs.push({
                        id: menu.menuId,
                        title: menu.menuName,
                        name: menu.menuName,
                        content: menu.menuUrl
                    });
                }
                this.selectTabName = menu.menuName;
                this.activeIndex = menu.menuId;
            },
            Tindex: function () {
                location.href = "";
            },
            collapseStatus: function () {
                this.collapseBtnClick = this.isCollapse;
                this.isCollapse = !this.isCollapse;
            },
            mainTabsClick: function (tab, event) {
            },
            mainTabsAddTab: function (targetName) {
                var newTabName = this.mainTabs.length + '';
                var tab = {
                    title: "tab页面" + newTabName,
                    name: newTabName,
                    src: ""
                }
                this.mainTabs.push(tab);
                this.selectTabName = newTabName;
            },
            mainTabsRemoveTab: function (targetName) {
                var tabs = this.mainTabs;
                var activeName = this.selectTabName;
                var activeIndex = this.activeIndex;
                var firstPageName = this.firstPageName;
                if (activeName === targetName) {
                    tabs.forEach(function (tab, index) {
                        if (tab.name === targetName) {
                            var nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                                activeIndex = nextTab.id;
                            } else {
                                activeName = firstPageName;
                                activeIndex = firstPageName;
                            }
                        }
                    });
                }
                this.selectTabName = activeName;
                this.activeIndex = activeIndex;
                this.mainTabs = tabs.filter(function (tab) {
                    return tab.name !== targetName;
                });
            },
            mainTabsRemoveOtherTab: function (targetName, n) {
                var tabs = this.mainTabs; // 所有tab页
                var activeName = this.selectTabName; // 被选中的tab页
                var activeIndex = this.activeIndex;
                var firstPageName = this.firstPageName; // 首页name
                var otherName = []; // 存最后结果
                var nextTab; // 备选
                var activeIndex; // 选择元素的索引
                // 获取被选元素索引
                tabs.forEach(function (tab, index) {
                    if (targetName == tab.name) {
                        activeIndex = index;
                    }
                })
                console.log(activeIndex);
                // 遍历所有tab页
                tabs.forEach(function (tab, index) {
                    if (n == -1) {
                        // 关闭左侧
                        if (index >= activeIndex) {
                            otherName.push(tabs[index]);
                            nextTab = tabs[activeIndex];
                        }
                    } else if (n == 0) {
                        // 关闭其他
                        if (index == activeIndex) {
                            otherName.push(tabs[index]);
                            nextTab = tabs[index];
                        }
                    } else if (n == 1) {
                        // 关闭右侧
                        if (index <= activeIndex) {
                            otherName.push(tabs[index]);
                            nextTab = tabs[activeIndex];
                        }
                    } else {
                        // 关闭全部
                        otherName = [];
                    }
                })

                if (nextTab) {
                    activeName = nextTab.name;
                    activeIndex = nextTab.id;
                } else {
                    activeName = firstPageName;
                    activeIndex = firstPageName;
                }
                this.selectTabName = activeName;
                this.activeIndex = activeIndex;
                this.mainTabs = otherName;
                otherName = '';
            },
            znfy: function () {
                this.supReconsider = true;
            },
            logoutSystem: function () {
                axios({
                    method: 'post',
                    url: appBaseUrl + '/login/logout',
                })
                    .then(response => {
                        let data = response.data;
                        if (data.code == 200) {
                            localStorage.clear();
                            location.href = mainWorkUrl + '/html/login.html';
                        } else {
                            this.$message.error(data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            tabsClick(title, con, e) {
                //显示menu菜单
                this.shade = true;
                this.menuVisible = true;
                this.selectTitle = title;
                localStorage.setItem('refresh', con);
                this.topSize = e.pageY;
                this.leftSize = e.pageX;
            },
            //关闭选项卡功能    注意：还需要上面的 .tabs和.menu右击触发事件显示菜单功能哦
            closeTab(text) {
                let title = this.selectTitle;
                if (text == '刷新标签页') {
                    var tabframe = localStorage.getItem('refresh');
                    this.bodyscreenLoading = true;
                    var src = this.$refs[tabframe][0].src;
                    this.$refs[tabframe][0].src = '';
                    setTimeout(() => {
                        this.$refs[tabframe][0].src = src;
                        this.bodyscreenLoading = false;
                    }, 1000);
                } else if (text == '关闭标签页') {
                    this.mainTabsRemoveTab(title);
                } else if (text == '关闭全部标签页') {
                    this.mainTabsRemoveOtherTab(title);
                } else if (text == '关闭其他标签页') {
                    this.mainTabsRemoveOtherTab(title, 0);
                } else if (text == '关闭右侧标签页') {
                    this.mainTabsRemoveOtherTab(title, 1);
                } else if (text == '关闭左侧标签页') {
                    this.mainTabsRemoveOtherTab(title, -1);
                }

                this.menuVisible = false;
            },
            closeMenu(e) {
                this.shade = false;
                this.menuVisible = false;
                this.$emit("close", false)
            },
            getUser() {
                axios({
                    method: 'get',
                    url: appBaseUrl + '/user/getuser',
                })
                    .then(response => {
                        let data = response.data;
                        if (data.code == 200) {
                            localStorage.setItem("userInfo", JSON.stringify(data.data));
                            this.userName = JSON.parse(localStorage.getItem('userInfo')).loginName;
                        } else {
                            this.$message.error(data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        }
    })
</script>
</body>
</html>